<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { GameGroup } from '@/types/game';
  import {
    getGameGroup,
    deleteGameGroup,
    removePlayerFromGameGroup,
  } from '@/api/game';
  import { User } from '@/types/user';
  import { Message, Modal } from '@arco-design/web-vue';
  import GameGroupItem from './game-group-item.vue';
  import GameGroupUpload from './game-group-upload.vue';
  import GameGroupEditor from './game-group-editor.vue';

  const props = defineProps<{
    gameId: string;
  }>();

  const creating = ref(false);
  // const batchCreating = ref(false);
  const uploading = ref(false);

  const editingGroup = ref<GameGroup | null>(null);
  const handleEditGroup = (group: GameGroup) => {
    editingGroup.value = group;
  };

  const gameGroupList = ref<GameGroup[]>([]);
  const loading = ref(false);
  const initData = async () => {
    try {
      loading.value = true;
      const res = await getGameGroup(props.gameId);
      gameGroupList.value = res.data.data || [];
    } finally {
      loading.value = false;
    }
  };

  const handleCreateDone = (refresh: boolean) => {
    if (refresh) {
      initData();
    }
    editingGroup.value = null;
    creating.value = false;
    uploading.value = false;
  };

  const handleDeleteGroup = (group: GameGroup) => {
    Modal.confirm({
      title: '提示',
      content: '确定删除该分组？',
      onBeforeOk: async () => {
        try {
          await deleteGameGroup(group.id);
          Message.success('已删除');
          initData();
        } finally {
          // do nothing
        }
      },
    });
  };

  const handleRemovePlayer = (user: User, group: GameGroup) => {
    Modal.confirm({
      title: '提示',
      content: '确定移除该球员？',
      onBeforeOk: async () => {
        try {
          await removePlayerFromGameGroup({
            userIds: [user.id],
            groupId: group.id,
            gameId: group.gameId,
          });
          Message.success('已移除');
          initData();
        } finally {
          // do nothing
        }
      },
    });
  };

  const handlePlayerAdded = () => {
    initData();
  };

  onMounted(() => {
    initData();
  });
</script>

<template>
  <div>
    <div style="margin-bottom: 20px">
      <a-space style="margin-left: 20px">
        <a-button @click="creating = true">
          <template #icon>
            <icon-user-add />
          </template>
          新建分组
        </a-button>
        <a-button @click="uploading = true">
          <template #icon>
            <icon-upload />
          </template>
          导入分组表
        </a-button>
      </a-space>
    </div>
    <div style="margin-top: 20px">
      <a-empty v-if="gameGroupList.length === 0" />
      <a-row v-else :gutter="[12, 12]">
        <a-col v-for="gameGroup in gameGroupList" :key="gameGroup.id">
          <GameGroupItem
            :game-group="gameGroup"
            @edit="handleEditGroup(gameGroup)"
            @delete="handleDeleteGroup(gameGroup)"
            @user-added="handlePlayerAdded"
            @user-remove="handleRemovePlayer($event, gameGroup)"
          />
        </a-col>
      </a-row>
    </div>

    <!-- <GameGroupBatchCreator
      v-if="batchCreating"
      :game-id="gameId"
      @close="handleCreateDone"
    /> -->
    <GameGroupUpload
      v-if="uploading"
      :game-id="gameId"
      @close="handleCreateDone"
    />
    <GameGroupEditor
      v-if="creating"
      :game-id="gameId"
      @close="handleCreateDone"
    />
    <GameGroupEditor
      v-if="editingGroup"
      :game-id="gameId"
      :game-group="editingGroup"
      @close="handleCreateDone"
    />
  </div>
</template>

<style lang="less" scoped>
  .player-team {
    &-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    &-name {
      min-width: 80px;
      padding: 0 10px;
      line-height: 24px;
      text-align: center;
      font-size: 12px;
      border-radius: 3px 3px 0 0;
      background: rgb(var(--gray-3));
    }
    &-action {
      font-size: 12px;
      a {
        margin-left: 10px;
        color: var(--color-text-2);
        cursor: pointer;
        &:hover {
          color: rgb(var(--primary-6));
        }
      }
    }

    &-grid {
      border: 3px solid rgb(var(--gray-3));
      border-radius: 0 3px 3px 3px;
    }

    .right-border {
      border: 1px solid rgb(var(--gray-3));
    }
  }

  .player-item {
    padding: 5px 8px;
    position: relative;

    &-name {
      font-size: 14px;
      line-height: 20px;
      margin-bottom: 5px;
    }

    &-info {
      line-height: 20px;
      font-size: 12px;
      color: var(--color-text-2);
    }

    a {
      position: absolute;
      right: 0;
      top: 0;
      color: rgb(var(--red-6));
      cursor: pointer;
      display: none;
    }

    &:hover {
      a {
        display: block;
      }
    }
  }

  .player-empty {
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
  }</style
>, removePlayerFromGameGroup
